<template>
  <div class="ovai-data-list">
    <a-checkbox-group v-model="radioVal" style="width: 100%;" @change="onChange">
      <div :key="'row-item-' + index" class="row" v-for="(item, index) in dataList_">
        <div class="cell radio" v-if="isRadio_"> <a-checkbox :value="item.key"> </a-checkbox></div>
        <div class="cell name" :title="item.name">
          <span>{{ item.name }}</span>
        </div>
        <div class="cell data">
          <div class="data-row" v-if="item.desc">
            <div class="data-cell">
              <div class="label">业务描述</div>
              <div class="value" :title="item.desc"><span>{{ item.desc }}</span></div>
            </div>
          </div>

          <div class="data-row" v-if="item.NeedUploadData">
            <div class="data-cell">
              <div class="label">需要上传资料</div>
              <div class="value" :title="item.NeedUploadData"><span>{{ item.NeedUploadData }}</span></div>
            </div>
          </div>

          <div class="data-row">
            <div class="data-cell" v-if="item.BusinessExpenses">
              <div class="label">业务费用</div>
              <div class="value" :title="item.BusinessExpenses"><span>{{ item.BusinessExpenses }}</span></div>
            </div>
            <div class="data-cell" v-if="item.BusinessAttributes">
              <div class="label">业务属性</div>
              <div class="value" :title="item.BusinessAttributes"><span>{{ item.BusinessAttributes }}</span></div>
            </div>
          </div>
        </div>
      </div>
      <a-empty v-if="dataList_.length==0"/>
    </a-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'OtherValueAddedItem',
  props: {
    value: { type: Array },
    dataList: { type: Array },
    isRadio: { type: Boolean, default: false }
  },
  data() {
    return {
      dataList_: [
        // { key: '1', name: '执照挂失', desc: '', BusinessAttributes: '', BusinessExpenses: '业务费用1', NeedUploadData: '需要上传资料1' },
        // { key: '2', name: '执照挂失', desc: '业务描述1', BusinessAttributes: '', BusinessExpenses: '', NeedUploadData: '需要上传资料1' },
        // { key: '3', name: '执照挂失', desc: '业务描述1', BusinessAttributes: '业务描述描述描述1', BusinessExpenses: '业务费用1', NeedUploadData: '' },
        // { key: '4', name: '执照挂失', desc: '', BusinessAttributes: '', BusinessExpenses: '业务费用1', NeedUploadData: '需要上传资料1' },
        // { key: '5', name: '执照挂失', desc: '业务描述1', BusinessAttributes: '业务描述描述描述1', BusinessExpenses: '业务费用1', NeedUploadData: '需要上传资料1' },
      ],
      isRadio_: false,
      radioVal: []
    }
  },
  watch: {
    value: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object String]') {
          this.radioVal = val
        }
      },
      deep: true,
      immediate: true
    },
    dataList: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Array]') {
          this.dataList_ = val
        }
      },
      deep: true,
      immediate: true
    },
    isRadio: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Boolean]') {
          this.isRadio_ = val
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    onChange(val) {
      // const value = val.target.value
      // const item = this.getDataListItem(value)
      const res = val
      // console.log('Cascader   onChange == >', val.target.value, item);
      this.$emit('change.value', res)
      this.$emit('change', res);
      this.$emit('input', res);
    },
    getDataListItem(key) {
      let res = null
      this.dataList_.forEach(item => {
        if (item.key == key) {
          res = item
        }
      })
      return res
    }
  }
}
</script>

<style lang="less">
.ovai-data-list {
  width: 100%;
  // height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  // border: 1px solid rgb(235, 238, 245);
  margin: 10px 0;
  height: 300px;
  overflow: auto;

  .row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 3px 0;
    border: 1px solid rgb(235, 238, 245);

    .cell {
      height: 100%;

      // border: 1px solid rgb(235, 238, 245);
      // border-left: 1px solid rgb(235, 238, 245);
      &.radio {
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        .ant-radio-wrapper {
          margin-right: 0px;
        }
      }

      &.name {
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        // border-left: 1px solid rgb(235, 238, 245);
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
      }

      &.data {
        width: 710px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        // overflow: hidden;

        .data-row {
          width: 100%;
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 30px;
          line-height: 30px;

          .data-cell {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            font-size: 14px;
            overflow: hidden;

            // border: 1px solid rgb(235, 238, 245);
            .label {
              width: 130px;
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              // border: 1px solid rgb(235, 238, 245);
              border-left: 1px solid rgb(235, 238, 245);
              border-top: 1px solid rgb(235, 238, 245);
              background: #fafafa;
              color: rgba(0, 0, 0, .85);
              font-weight: 400;
              padding: 5px 10px;
            }

            .value {
              flex: 1;
              height: 100%;
              // border: 1px solid rgb(235, 238, 245);
              border-left: 1px solid rgb(235, 238, 245);
              border-top: 1px solid rgb(235, 238, 245);
              display: flex;
              justify-content: flex-start;
              align-items: center;
              color: rgba(0, 0, 0, .65);
              padding: 5px 10px;
              overflow: hidden;


              span {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
</style>
